<template>
	<view class="container" v-if="status==1">
		<!-- 12263F -->
		<view class="img"
			style="background: url(https://go.cdn.heytea.com/storage/products/2019/12/18/01954797f3fb470cb6ba1606476c658c.png);">
		</view>
		<!-- <view class="img" style="background-color:#12263F ;"></view> -->
		<view class="content">
			<view class="welcome" @tap="appLoginWx()">
				<view v-if="isLogin">
					<image v-if="isLogin" :src="userinfo.avatarUrl" class="headpic"></image>
					<view>
						<text>{{userinfo.nickName}}</text>
						<text>普通用户</text>
					</view>
				</view>
				<!-- <view style="text-align: center;">{{userinfo.nickname}}</view> -->

				<view v-else style="text-align: center; margin-top: 70rpx;">立即登录</view>
			</view>
			<!-- member card begin -->
			<view class="member-card" v-if="isLogin">
				<view class="row">
					<navigator class="grid" open-type="navigate" url="/pages/myOrder/myOrder">
						<image src="/static/images/my/jf.png"></image>
						<view class="value">0</view>
						<view class="title">订单</view>
					</navigator>
					<view class="grid" hover-class="opacity-6" @tap="toGoCoupon">
						<image src="/static/images/my/yhq.png"></image>
						<view class="value">{{myCouponLength}}</view>
						<view class="title">优惠券</view>
					</view>
					<navigator class="grid" open-type="navigate" url="/pages/my/wallet">
						<image src="/static/images/my/ye.png"></image>
						<view class="value">0</view>
						<view class="title">余额</view>
					</navigator>
				</view>
			</view>
			<!-- member card end -->
			<view v-if="isLogin">
				<list-cell hover arrow last @click="clear()">
					<view class="list-cell-wrapper">
						<view view="title">清理缓存</view>
					</view>
				</list-cell>

				<list-cell hover arrow last @click="logout()">
					<view class="list-cell-wrapper">
						<view view="title">退出登录</view>
					</view>
				</list-cell>
			</view>

			<!-- <navigator open-type="navigate" url="../addresses/addresses">
			<list-cell hover arrow last>
				<view class="list-cell-wrapper">
					<view view="title">地址管理</view>
				</view>
			</list-cell>
			</navigator> -->
			<!-- 	<view v-for="(item,index) in articles" :key="index" @click="nav(item)">
			
			<list-cell hover arrow>
				<view class="list-cell-wrapper">
					<view view="title">{{item.title}}</view>
				</view>
			</list-cell>
			 -->
			<!-- </view> -->
			<!-- <view class="cu-list menu">
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill  text-tree"></text>
						<text class="text-grey">意见反馈</text>
					</button>
				</view>
				<view class="cu-item arrow" @click="clear()">
					<view class="content" url="/pages/about/test/list" hover-class="none">
						<text class="cuIcon-creativefill text-tree"></text>
						<text class="text-grey">清理缓存</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="logout()">
					<!-- open-type="contact" -->
		</view>
		<!-- 店家信息 -->
		<!-- 	<view class="info22">
				<view>{{shopTel}}</view>
				<view>{{shopAddress}}</view>
			</view> -->
		<!-- 店家信息 end -->
		<!-- 登录popup -->
		<!-- <login-popup ref="loginPopup" @auto="auto" @getInfo="updateUserInfo"></login-popup>
			<xcx-auth v-if="is_show_auth"  @getInfo="updateUserInfo" @getInfoFail="getInfoFail"></xcx-auth> -->
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue';
	import loginPopup from './components/login-popup.vue'
	import {
		mapState
	} from 'vuex'
	import user from '@/api/user.js'
	import usercoupon from "@/api/user_coupon.js"
	import systemModel from '@/api/system.js'
	import article from '@/api/article.js'
	import XCXauth from './components/xcx_auth.vue'
	export default {
		components: {
			listCell,
			'login-popup': loginPopup,
			'xcx-auth': XCXauth,
		},
		data() {
			return {
				isLogin: false,
				avatar: 'https://wzq0307.com/img/images/images/collected.png',
				boardcast: [],
				userinfo: {},
				// isLogin: false, 
				couponn: 0,
				coupon: [],
				shopAddress: '',
				shopTel: '',
				articles: [],
				openid: '',
				status: 3,
				// 显示授权登录
				is_show_auth: false,
				//优惠卷长度
				myCouponLength: 0
			}
		},
		onLoad() {
			let _this = this;
			// this.getUserInfo();
			// this.appLoginWx();
			this.get_artical()
			// this.getCouponInfo()
			// this.show_data();
			uni.request({
				url: 'https://apiorder.wzq0307.com/api/Status/index',
				method: 'GET',
				data: {},
				success: (res) => {
					console.log(11111, res.data.data.status);
					_this.status = res.data.data.status;
					uni.setStorage('status', res.data.data.status);
				},
				fail: function(e) {
					console.log(JSON.stringify(e));
				}
			})
			// this.getSystemConfig();
		},
		onShow() {
			if (uni.getStorageSync('openid')) {
				this.getCouponInfo();
			}
		},
		methods: {
			//获取优惠卷信息
			getCouponInfo() {
				let _this = this;
				uni.request({
					url: 'https://apiorder.wzq0307.com/api/UserCoupon/my',
					method: 'GET',
					data: {
						open_id: uni.getStorageSync('openid')
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log("1211111", res)
							let myArr = [];
							res.data.data.couponList.forEach(element => {
								if (element.user_status == 0) {
									myArr.push(element)
								}
							})
							_this.myCouponLength = myArr.length
						} else {
							uni.showLoading({
								title: '获取满减列表失败'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
						}
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				})
			},
			auto() {
				this.appLoginWx();
				user.get_info().then(res => {
					if (res.data.nickname) {
						this.isLogin = true
					} else
						this.isLogin = false
					//this.isLogin=res.data
					// console.log(this.isLogin)
				})

			},
			// async getUserInfo() {
			// 	const _this = this;
			// 	await user.get_info().then(async res => {
			// 		console.log('get_info', res)
			// 		_this.$refs['loginPopup'].close()
			// 		if (res.data && !(res.data.headpic || res.data.nickname) || (res.data.headpic ==
			// 				null && res.data.nickname == null)) {
			// 			await uni.getSetting({
			// 				success(res1) {
			// 					// 已授权
			// 					if (res1.authSetting['scope.userInfo']) {
			// 						// 获取用户信息
			// 						// uni.getUserInfo({
			// 						// 	provider: 'weixin',
			// 						// 	success: function(infoRes) {
			// 						// 		user.upinfo(infoRes.userInfo).then(res => {
			// 						// 			_this.getUserInfo();
			// 						// 		});
			// 						// 	}
			// 						// })
			// 						wx.getUserProfile({
			// 							desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			// 							success: (res) => {
			// 								console.log('profile:', res.userinfo)
			// 								// if (res.userinfo) {
			// 								// 	_this.userinfo=res.userinfo
			// 								// 	const user = res.userInfo		 
			// 								// 	that.UpUser(user,res.encryptedData,res.iv) 
			// 								// 	_this.is_show_auth=false;
			// 								// 	console.log(123,_this.userinfo);
			// 								// }
			// 							}
			// 						})
			// 					} else {
			// 						_this.is_show_auth = true;
			// 					}
			// 				}
			// 			})
			// 		} else {
			// 			_this.isLogin = true;
			// 			_this.userinfo = res.data;
			// 			_this.is_show_auth = false;
			// 			console.log("userinfo",_this.userinfo)
			// 		}
			// 	})
			// },
			//登录
			appLoginWx() {

				let _this = this
				if (_this.isLogin == false) {
					uni.login({
						provider: 'weixin',
						success: (res2) => {
							// let appid = 'wx4f8be5dead389437';
							// let appSecret = '24d480d2bf4b6c4d8f724f20cc9edeb3';				
							_this.code = res2.code;
							console.log('code', _this.code)
							uni.request({
								url: 'https://apiorder.wzq0307.com/api/User/openId',
								data: {
									code: _this.code
								},
								header: {
									"Content-Type": "application/x-www-form-urlencoded",
								},
								method: "POST",
								success: (res) => {
									console.log('openid', res.data.data.openid.openid)
									uni.setStorage({
										key: 'openid',
										data: res.data.data.openid.openid
									})
									_this.openid = uni.getStorageSync('openid');
								}
							})

						},
						fail: () => {
							uni.showToast({
								title: "微信登录授权失败1",
								icon: "none"
							});

						}
					})
					uni.getUserProfile({
						provider: 'weixin',
						desc: '登录',
						success: (info) => { //这里请求接口
							console.log(info);
							_this.userinfo = info.userInfo;
							_this.is_show_auth = false;
							_this.isLogin = true;
							console.log(5550, _this.userinfo)
							// _this.nones = false;
							uni.setStorage({ //缓存用户登陆状态
								key: 'MyusrInfo',
								data: info.userInfo
							})
							const eventChannel = _this.getOpenerEventChannel()
							// console.log("222222",eventChannel,'55555',eventChannel.emit)
							let emit = eventChannel.emit ?? ''
							if (emit) {
								eventChannel.emit('acceptDataFromOpenedPage', {
									data: {
										'MyusrInfo': info.userInfo,
										'openid': uni.getStorageSync('openid')
									}
								})
							}
							//调用接口存在数据库
							//https://wzq0307.com/admin/User/add
							uni.request({
								url: "https://apiorder.wzq0307.com/api/User/add",
								data: {
									avatar: _this.userinfo.avatarUrl,
									open_id: _this.openid,
									nickname: _this.userinfo.nickName
								},
								method: "POST",
								success: (res) => {
									// console.log(55555,res)
									// if(res.data.status==0){


									// }
								}
							})
							// uni.navigateBack({
							// 	fail:function(){
							// 		uni.redirectTo({
							// 			url:'../my/my'
							// 		})
							// 	}
							// })
						},
						fail: () => {
							// console.log(res)
							uni.showToast({
								title: "微信登录授权失败2",
								icon: "none"
							});
							_this.getUserInfos();
						}
					})
					uni.getProvider({
						service: 'oauth',
						success: function(res) {
							if (~res.provider.indexOf('weixin')) {} else {
								uni.showToast({
									title: '请先安装微信或升级版本',
									icon: "none"
								});
							}
						}
					});
				}
			},
			clear: function() {
				uni.showToast({
					title: '清理缓存成功',
					icon: 'none',
				})
				// this.logout()
				uni.clearStorage()
			},
			//用户退出登录
			logout: function() {
				let _this = this;
				uni.showModal({
					title: '警告',
					content: '确定要退出登录？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							uni.showToast({
								title: "退出成功"
							})
							_this.isLogin = false;
							// uni.removeStorageSync("MyusrInfo")


							uni.clearStorage()
							_this.nickname = '';
							_this.avatar = '';
						}
					}
				})
			},
			//获取用户授权
			getUserInfos: function() {
				let _this = this;
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userInfo'] != undefined && res.authSetting[
								'scope.userInfo'] != true || res.authSetting[
								'scope.userInfo'] == false) {
							wx.showModal({
								title: '请求授权当前用户信息',
								content: '需要获取您的用户信息，请确认授权',
								success: function(res) {
									if (res.cancel) {
										wx.showToast({
											title: '拒绝授权',
											icon: 'none',
											duration: 1000
										})
									} else if (res.confirm) {
										wx.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting[
														"scope.userInfo"] ==
													true) {
													wx.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													console.log('授权后的', dataAu)
													_this.appLoginWx();
												} else {
													wx.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})

												}
											}
										})
									}
								}

							})
						} else if (res.authSetting['scope.userInfo'] == undefined) {
							//调用wx.getLocation的API
							// vm.getLocation();
						} else {
							//调用wx.getLocation的API
							// vm.getLocation();
						}

						setTimeout(function() {
							wx.hideLoading()
						}, 500)
					}
				})
			},
			// 保存微信头像昵称信息
			updateUserInfo(infoRes) {
				const _this = this;
				console.log('infoRes', infoRes)
				user.upinfo(infoRes).then(res => {
					// _this.userinfo=infoRes
					// _this.getUserInfo();
					_this.appLoginWx()
					this.is_show_auth = false;
				});
			},
			// 拒接授权获取个人信息
			getInfoFail() {
				this.is_show_auth = false;
				uni.showModal({
					title: '提示',
					content: '您已取消了授权，请重新授权登录',
					showCancel: false
				});
			},
			openLoginPopup() {
				console.log(this.isLogin)
				if (this.isLogin) {
					return
				}
				this.isLogin = true
				this.$refs['loginPopup'].open()
			},
			get_artical() {
				article.getPersonArticle().then(res => {
					this.articles = res.data
				})
			},
			// 跳转优惠券列表
			toGoCoupon() {
				uni.navigateTo({
					url: '../coupon/coupon?type=my'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.img {
		height: 28vh;
		background-position: 0 0;
		background-size: 100%;
	}

	.content {
		padding: 0 30rpx;
	}

	.welcome {
		position: relative;
		margin-top: -190rpx;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #12263F;

		>view {
			padding-left: 50rpx;
			display: flex;

			>view {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;

				>text {
					&:last-child {
						color: #777;
						font-size: 0.8rem;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.headpic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.member-card {
		background-color: #ffffff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		border-radius: 6rpx;
		margin-bottom: 40rpx;
		margin-top: 30rpx;

		.info {
			position: relative;
			margin-top: -50rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			font-size: 12px;

			.title {
				flex: 1;
				font-size: 12px;
				color: #333;
				display: flex;
				align-items: center;

				.tips {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #999;
					background-color: #e9e9e9;
					padding: 10rpx 30rpx;
					border-radius: 50rem !important;
					display: flex;
					align-items: center;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 100%;
			}

			.badage {
				font-family: 'neutra';
				position: absolute;
				bottom: 20rpx;
				left: 0;
				border: 2rpx solid #333;
				padding: 2rpx 20rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
			}
		}

		.row {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.grid {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				// image {
				// 	width: 100rpx;
				// 	height: 100rpx;
				// }

				.value {
					font-family: 'neutra';
					margin-bottom: 8rpx;
					font-size: 32rpx;
				}

				.title {
					font-size: 24rpx;
					color: #999;
				}

				image {
					width: 30px;
					height: 30px;
					margin-bottom: 10px;
				}
			}
		}
	}
</style>
